<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>坐标轴</title>
    <script src="https://cdn.bootcss.com/d3/5.15.1/d3.min.js"></script>
</head>

<body>
    <style>
        .grid-line {
            stroke: black;
            shape-rendering: crispEdges;
            stroke-opacity: .2;
        }

    </style>

    <script>
        var height = 500,
            width = 500,
            margin = 25,
            offset = 50,
            axisWidth = width - 2 * margin,
            svg = {};

        svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        var scale = d3.scaleTime()
            .domain([new Date(2012, 0, 1), new Date()])
            .range([0, axisWidth])

        var axis = d3.axisTop(scale) //使用比例尺创建坐标轴

        svg.append("g")
            .attr("transform", 'translate(20,20)')
            .call(axis); //在图形中使用call方法，加入坐标轴。

        // // var axis = d3.axisRight(scale)

        // // svg.append("g")
        // //     .call(axis);
        // var scale = d3.scaleLinear()
        //     .domain([0, 1]).range([0, axisWidth]);
        var axis = d3.axisBottom()
            .scale(scale)
            // .ticks(2) //刻度数量
            .tickSize(5) // <-A
            .tickPadding(5) // <-B
        svg.append("g")
            .attr("transform", 'translate(20,120)')
            .call(axis);

        svg.append("g")
            .attr("class", "x-axis")
            .attr("transform", function () { // <-A
                return "translate(" + margin + "," +
                    (height - margin) + ")";
            })
            .call(axis);
        d3.selectAll("g.x-axis g.tick") // <-B
            .append("line") // <-C
            .classed("grid-line", true)
            .attr("x1", 0) // <-D
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", - (height - 2 * margin)); // <-E
    </script>
</body>

</html>
